<template>
  <div class="flex items-center justify-center mt-[16px]">
    <img src="../../static/u41.svg " class="h-[2px] flex-1" alt="" srcset="" />
    <div class="relative w-[20px] mx-[12px] h-[17px]">
      <img class="absolute top-[3px] w-[4px] h-[4px]" src="../../static/u40.svg" alt="" srcset="" />
      <img
        class="absolute left-[-4px] top-[6px] w-[4px] h-[4px]"
        src="../../static/u40.svg"
        alt=""
        srcset=""
      />
      <img
        class="absolute bottom-[4px] w-[4px] h-[4px]"
        src="../../static/u40.svg"
        alt=""
        srcset=""
      />
    </div>
    <div class="ax_default w-[52px] flex-1 flex items-center justify-center" font="bold">
      {{ props.title }}
    </div>
    <div class="relative flex justify-end w-[20px] mx-[12px] h-[17px]">
      <img class="absolute top-[3px] w-[4px] h-[4px]" src="../../static/u40.svg" alt="" srcset="" />
      <img
        class="absolute right-[-4px] top-[6px] w-[4px] h-[4px]"
        src="../../static/u40.svg"
        alt=""
        srcset=""
      />
      <img
        class="absolute bottom-[4px] w-[4px] h-[4px]"
        src="../../static/u40.svg"
        alt=""
        srcset=""
      />
    </div>
    <img src="../../static/u41.svg" class="rotate-180 h-[2px] flex-1" alt="" srcset="" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

type Props = {
  title: string;
};

const props = defineProps<Props>();
</script>

<style scoped>
.ax_default {
  font-family: "Arial Normal", "Arial", sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  line-height: normal;
  text-transform: none;
}
</style>
